<template>
	<view>
		<sub-nav></sub-nav>
		<view class="" :key="dropKey">
			<u-dropdown class="drop">
				<u-dropdown-item v-model="selections.type" title="类型" :options="type_options"></u-dropdown-item>
				<u-dropdown-item v-model="selections.format" title="格式" :options="formats_options"></u-dropdown-item>
			</u-dropdown>
		</view>

		<view class="comPage">
			<view class="cardWrap" v-for="(data,index) in showList" :key="index" @click="selectCard(data,index)" :class="selectFlag && selectArray.indexOf(index) === -1 ? 'selectMode' : '' ">
				<comment-card :key='index+1' ref="commentCard" :data="data" @deleteComment='deleteComment($event)'></comment-card>
			</view>
			<view class="" v-if="showList.length != 0">
				<u-loadmore :status="status"/>
			</view>
			<view class="empty" v-if="showList.length === 0">
				<u-empty text="数据为空" mode="list" icon-size="240" font-size="35"></u-empty>
			</view>
		</view>
		

		<view>
			<u-popup v-model="popupDelete" mode="center">
				<view class="popupDelete">
					<view class="warnText">
						删除后不可恢复，确认删除吗？
					</view>
					<view class="confirmButton">
						<view class="deletebutton">
							<u-button type="error" @click="deleteFinish()">删除</u-button>
						</view>
						<view class="canclebutton">
							<u-button type="default" @click="popupDelete = false">取消</u-button>
						</view>
					</view>
				</view>
			</u-popup>
		</view>
		<view class="button">
			<view class="select">
				<u-button type="primary" @click="selectComment()" v-if="!selectFlag">多选</u-button>
				<u-button type="primary" @click="selectComment()" v-if="selectFlag">取消多选</u-button>
			</view>
			<view class="delete">
				<u-button type="error" @click="deleteComments()">删除</u-button>
			</view>
		</view>
		<view>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dropKey: 50,
				selectFlag: false,
				selectArray: [],
				popupDelete: false,
				delingId: null,
				delIds: [],
				selections: {
					type: 1,
					format: 1,
				},
				formats_options: [{
					label: '全部',
					value: 1
				}, {
					label: '',
					value: 2
				}, {
					label: '',
					value: 3
				}],
				type_options: [{
					label: '全部',
					value: 1
				}, {
					label: '',
					value: 2
				}, {
					label: '',
					value: 3
				}],
				list: [],
				showList: [],
				status: 'loadmore',
				num:6,
				page:1
			}

		},
		methods: {
			selectComment() {
				if (this.selectFlag && this.selectArray) {
					this.selectArray = []
				}
				this.selectFlag = !this.selectFlag
				this.$refs.commentCard.forEach((item) => {
					item.cardSelected()
				});
			},
			deleteComments(data) {
				this.popupDelete = true
			},
			deleteComment(data) {
				if (!this.selectFlag) {
					this.popupDelete = true
					this.delingId = data.commentId
				}
			},
			selectCard(item, index) {
				if (!this.selectFlag) {
					return null
				} else {
					let flag = this.selectArray.indexOf(index)
					if (flag === -1) {
						console.log(item);
						this.selectArray.push(index)
						this.delIds.push(item.commentId)
					} else {
						this.selectArray.splice(flag, 1)
						this.delIds.splice(flag, 1)
					}
				}
			},
			deleteFinish() {
				if (this.delingId) {
					this.delIds.push(this.delingId)
				}
				if (!this.delIds.length) {
					this.$refs.uToast.show({
						title: '请选择删除的评论',
						//type: 'success',
					})
					return
				}
				console.log(this.delIds);
				this.$api.myCommentDelete(this.$store.state.access_token, this.delIds.toString())
					.then(res => {
						console.log(res);
						this.delingId = null
						this.delIds = []
						this.$refs.uToast.show({
							title: '删除成功',
							type: 'success'
						})
					})
				this.selectFlag = false
				this.popupDelete = false
				setTimeout(() => {
					this.refresh()
				}, 1500)
			},
			refresh(){
				this.page = 1
				this.$api.myCommentpost(this.$store.state.access_token,this.num,this.page)
				.then(res => {
					this.list = res.values.records
					this.showList = res.values.records
					console.log(res);
				})
			}
		},
		watch: {
			selections: {
				handler(val, oldval) {
					if (val.format === 1 && val.type === 1) {
						this.showList = this.list
					} else {
						this.showList = []
						this.list.forEach((item, index) => {
							if ((val.format === 1 || item.learningResourceFormat.name === this.formats_options[val.format - 1].label) &&
								(val.type === 1 || item.learningResourceType.name === this.type_options[val.type - 1].label)) {
								this.showList.push(item)
							}
						})
					}
					console.log(this.showList);
					this.showKey += 1
				},
				deep: true
			}
		},
		onLoad(data) {
			//option为object类型，会序列化上个页面传递的参数
			this.$api.myCommentget(this.$store.state.access_token, '')
				.then(res => {
					console.log(res);

					res.values.formats.forEach((item, index) => {
						this.formats_options[index + 1] = {
							label: item.name,
							value: Number(index + 2)
						}
					})

					res.values.types.forEach((item, index) => {
						this.type_options[index + 1] = {
							label: item.name,
							value: Number(index + 2)
						}
					})
					this.dropKey += 1
					return this.$api.myCommentpost(this.$store.state.access_token,this.num,this.page)
				}).then(res => {
					this.list = res.values.records
					this.showList = res.values.records
					console.log(res);
				})
		},
		onReachBottom() {
			if (this.status === 'loadmore') {
				this.page += 1
				this.status = 'loading'
				this.$api.myCommentpost(this.$store.state.access_token,this.num,this.page)
					.then(res => {
						if (res.values.records.length === 0) {
							this.status = 'nomore'
						} else {
							res.values.records.forEach((item, index) => {
								this.showList.push(item)
							})
							this.status = 'loadmore'
						}
					})
			} else {
		
			}
		
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $uni-bg-color;
	}

	.drop {
		background-color: white;
	}
	.comPage{
		box-sizing: border-box;
		padding-bottom: 100rpx;
	}
	.button {
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		width: 100%;

		.select {
			width: 50%;
		}

		.delete {
			width: 50%;
		}
	}

	.selectMode {
		opacity: 0.45
	}

	.popupDelete {
		box-sizing: border-box;
		padding: 50rpx;

		.confirmButton {
			padding-top: 35rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-evenly;

			.deletebutton {
				width: 45%;
			}

			.canclebutton {
				width: 45%;
			}

		}
	}

	.empty {
		position: fixed;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}
</style>
